<template>
  <div class="wrapper">
    <div class="title">
    <div class="box1"><i class="el-icon-document-copy"></i>&nbsp;&nbsp;{{title}}</div>
    <div class="box2 flex-a cursor" @click="redirectToDetail">更多>></div>
    </div>
    <div>
      <el-row type="flex" justify="space-between" v-for="(item,index) in formattedNews" :key="index" class="row">
        <div class="cursor newsTitle" @click="goNews(item.id)">
          <span style="color: #b1afaf;font-size: 20px">·</span>
          {{ item.title }}
        </div>
        <div class="time" :style="item.date==='new'?'color:red':''">
          {{ item.date }}
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "SideSection",
  props: ['title', 'id'],
  data() {

    return {
      news: [
        {title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表', date: 1700720434984, id: 1},
        {title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表', date: 1700520234984, id: 1},
        {title: '习近平会见全国应急管理系统先进模范和消防忠诚卫士表彰大会代表', date: 1620720434984, id: 1},
      ]
    }
  },
  computed: {
    formattedNews() {
      const copyNews = [...this.news]
      const now = new Date()
      for (let oneNews of copyNews) {
        let date = new Date(oneNews.date)
        if ((now - date) / (24 * 60 * 60 * 1000) < 3) {
          oneNews.date = 'new'
        } else {
          oneNews.date = this.formattingTime(date.getMonth() + 1) + '-' + this.formattingTime(date.getDate())
        }

      }
      return copyNews
    }
  },
  methods:{
    // 格式化时间——两位数
    formattingTime(val) {
      if (val < 10) {
        val = '0' + val
      }
      return val
    },
    goNews(id) {
      this.$router.push({
        path: '/home/news',
        query: {
          id: id
        }
      })
    },
    redirectToDetail() {
      // 根据标题跳转到详情页面
      if (this.title === '通知公告') {
        this.$router.push('noticepublic');
      } else if (this.title === '本埠报道') {
        this.$router.push('localnews');
      }else if (this.title === '警营文化') {
        this.$router.push('policeculture');
      }
    }
  }
}
</script>

<style scoped>
.wrapper{
  padding-top: 10px;
}
.title{
  display: flex;
  border-bottom: 1px solid #b2b4b4  ;
}
.box1{
  width: 50%;
  height: 40px;
  padding-left:10px;
  font-size: 20px;
  color:whitesmoke;
  background-color:rgb(72, 157, 226);
  display: flex;
  align-items: center;
  white-space: nowrap;

}
.box2{
  width: 50%;
  font-size: 15px;
  color: #b1afaf;
  display: flex;
  align-items: center;
  justify-content: right;
  border-bottom: px solid rgb(123, 134, 141);
}
.newsTitle {
  white-space: nowrap;
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  margin-left: 10px;
  font-size: 16px;
  color: rgb(14, 13, 13);
  padding-right: 30px;
}
.row{
  height: 40px;
  display: flex;
  align-items: center;
}
.time {
  color: #b1afaf;
  white-space: nowrap;
}
</style>